<script>
import { onMounted, onBeforeUnmount, reactive, toRefs, ref } from "vue";

import * as echarts from "echarts";
export default {
  props: {
    labelList: { type: Array, default: [] }, //标签列表
    dataList: { type: Array, default: [] }, //数据列表
    dataListm: { type: Array, default: [] }, //数据列表
    dataListq: { type: Array, default: [] }, //数据列表
    dataListy: { type: Array, default: [] }, //数据列表

  },
  setup(props) {
    const state = reactive({});

    const echartContainer = ref();
    let myChart = null;

    const resizeHandler = () => {
      myChart.resize();
    };

    //防抖
    const debounce = (func, wait) => {
      let timeout;
      return function () {
        const context = this;
        const args = arguments;
        if (timeout) clearTimeout(timeout);
        timeout = setTimeout(() => {
          func.apply(context, args);
        }, wait);
      };
    };

    const cancalDebounce = debounce(resizeHandler, 500);

    const initChart = () => {
      myChart = echarts.init(echartContainer.value);

      window.addEventListener("resize", cancalDebounce);

      let option = {
        title:{
          text: "按小时各个出口客流统计",
          top:"1%",
          textStyle:{
              fontSize:12,
 
          },
        },
        tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  //legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
        xAxis: {
          type: "value",
         
        },
        yAxis: {
          type: "category",
          data: props.labelList,
        },
        series: [
    {
      name: '1th',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [
          props.dataList[0],
          props.dataList[1],
          props.dataList[2],
          props.dataList[3],
          props.dataList[4],   
        ]
    },
    {
      name: '2th',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [props.dataList[5],
          props.dataList[6],
          props.dataList[7],
          props.dataList[8],
          props.dataList[9],  ]
    },
    {
      name: '3th',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [
      props.dataList[10],
          props.dataList[11],
          props.dataList[12],
          props.dataList[13],
          props.dataList[14],  
      ]
    },
    {
      name: '4th',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [props.dataList[15],
          props.dataList[16],
          props.dataList[17],
          props.dataList[18],
          props.dataList[19],  ]
    },
    {
      name: '5th',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [
      props.dataList[20],
          props.dataList[21],
          props.dataList[22],
          props.dataList[23],
          props.dataList[24],  
      ]
    },{
      name: '6th',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [
      props.dataList[25],
          props.dataList[26],
          props.dataList[27],
          props.dataList[28],
          props.dataList[29],  
      ]
    },
    {
      name: '7th',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [
      props.dataList[30],
          props.dataList[31],
          props.dataList[32],
          props.dataList[33],
          props.dataList[34],  
      ]
    },
    {
      name: '8th',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [
      props.dataList[35],
          props.dataList[36],
          props.dataList[37],
          props.dataList[38],
          props.dataList[39],  
      ]
    },
    {
      name: '9th',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [
      props.dataList[40],
          props.dataList[41],
          props.dataList[42],
          props.dataList[43],
          props.dataList[44],  
      ]
    },
    {
      name: '10th',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [
      props.dataList[45],
          props.dataList[46],
          props.dataList[47],
          props.dataList[48],
          props.dataList[49],  
      ]
    },{
      name: '11th',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [
      props.dataList[50],
          props.dataList[51],
          props.dataList[52],
          props.dataList[53],
          props.dataList[54],  
      ]
    },
    {
      name: '12th',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [
      props.dataList[55],
          props.dataList[56],
          props.dataList[57],
          props.dataList[58],
          props.dataList[59],  
      ]
    },
    {
      name: '13th',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [
      props.dataList[60],
          props.dataList[61],
          props.dataList[62],
          props.dataList[63],
          props.dataList[64],  
      ]
    },
    {
      name: '14th',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [
      props.dataList[65],
          props.dataList[66],
          props.dataList[67],
          props.dataList[68],
          props.dataList[69],  
      ]
    },
    {
      name: '15th',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [
      props.dataList[70],
          props.dataList[71],
          props.dataList[72],
          props.dataList[73],
          props.dataList[74],  
      ]
    },{
      name: '16th',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [
      props.dataList[75],
          props.dataList[76],
          props.dataList[77],
          props.dataList[78],
          props.dataList[79],  
      ]
    },
    {
      name: '17th',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [
      props.dataList[80],
          props.dataList[81],
          props.dataList[82],
          props.dataList[83],
          props.dataList[84],  
      ]
    },
    {
      name: '18th',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [
      props.dataList[85],
          props.dataList[86],
          props.dataList[87],
          props.dataList[88],
          props.dataList[89],  
      ]
    },
    {
      name: '19th',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [
      props.dataList[90],
          props.dataList[91],
          props.dataList[92],
          props.dataList[93],
          props.dataList[94],  
      ]
    },
    {
      name: '20th',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [
      props.dataList[95],
          props.dataList[96],
          props.dataList[97],
          props.dataList[98],
          props.dataList[99],  
      ]
    },{
      name: '21st',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [
      props.dataList[100],
          props.dataList[101],
          props.dataList[102],
          props.dataList[103],
          props.dataList[104],  
      ]
    },
    {
      name: '22nd',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data:[props.dataList[105],
          props.dataList[106],
          props.dataList[107],
          props.dataList[108],
          props.dataList[109],  
      ]
    },
    {
      name: '23rd',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data:[props.dataList[110],
          props.dataList[111],
          props.dataList[112],
          props.dataList[113],
          props.dataList[114],  
      ]
    },
    {
      name: '24th',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data:[props.dataList[115],
          props.dataList[116],
          props.dataList[117],
          props.dataList[118],
          props.dataList[119],  
      ]
    },
    {
      name: '25th',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data:[props.dataList[120],
          props.dataList[121],
          props.dataList[122],
          props.dataList[123],
          props.dataList[124],  
      ]
    },{
      name: '26th',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data:[props.dataList[125],
          props.dataList[126],
          props.dataList[127],
          props.dataList[128],
          props.dataList[129],  
      ]
    },
    {
      name: '27th',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data:[props.dataList[130],
          props.dataList[131],
          props.dataList[132],
          props.dataList[133],
          props.dataList[134],  
      ]
    },
    {
      name: '28th',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data:[props.dataList[135],
          props.dataList[136],
          props.dataList[137],
          props.dataList[138],
          props.dataList[139],  
      ]
    },
    {
      name: '29th',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data:[props.dataList[140],
          props.dataList[141],
          props.dataList[142],
          props.dataList[143],
          props.dataList[144],  
      ]
    },
    {
      name: '30th',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data:[props.dataList[145],
          props.dataList[146],
          props.dataList[147],
          props.dataList[148],
          props.dataList[149],  
      ]
    }
  ]

      };

      myChart.setOption(option);
    };

    onMounted(() => {
      initChart();
    });

    onBeforeUnmount(() => {
      window.removeEventListener("resize", cancalDebounce);
      myChart.dispose();
    });

    return { ...toRefs(state), echartContainer };
  },
};
</script>

<template>
  <el-card shadow="never" style="width: 100%; height: 100%">
    <template #header> {{ title }}</template>
    <div ref="echartContainer" style="width: 100%; height: 100%"></div>
  </el-card>
</template>
<style scoped>
</style>